<template>
    <!-- <div class="sourcePage">
        <ul class="main">
            <li v-for="(item,index) of sources" :key="index">
                <img :src="item.src" alt="">
                <span>{{item.name}}</span>
                <span>{{item.data}}</span>
                <span>{{item.unit}}</span>
            </li>
        </ul>
    </div> -->
    <div>
        <!-- 右中标题开始-->
        <div id="rightCenterTitle" class="centertitle">
        <p id="rightCenterP"><img src="../../../assets/img/plan.png" />仓内物资情况</p>
        <div class="boderBottom"></div>
        </div>
        <!-- 右中标题结束-->

        <!-- 右中echarts开始-->
        <div id="rightCenter1">
            <div v-for="(item,index) of sources" :key="index">
                <p style="margin-top: 15px; margin-left: 15px; font-size: 12px">
                {{ item.name }}
                </p>
                <p
                style="
                    margin-top: 15px;
                    margin-left: 15px;
                    font-size: 18px;
                    color: #2ed64a;
                    font-weight: bold;
                "
                >
                {{ item.data }}
                </p>
            </div>        
        </div>
        <div id="rightCenter2"></div>
    <!-- 右中echarts结束-->

    <!-- 右中背景图结束-->
    </div>
</template>

<script>
export default {
    data(){
        return{
            sources:[
                {
                    name:'防爆头盔',
                    data:'5,685',
                },{
                    name:'防刺服',
                    data:'8,650',
                    unit:'(套)'
                },{
                    name:'防割手套',
                    data:'5,683',
                },{
                    name:'橡胶警棍',
                    data:'8,690',
                },{
                    name:'强光手电筒',
                    data:'1,265',
                },{
                    name:'灭火器',
                    data:'5,050',
                },{
                    name:'便携阻车器',
                    data:'1,245',
                },{
                    name:'轮椅',
                    data:'5,054',
                },{
                    name:'AED',
                    data:'1,276',
                },{
                    name:'应急药箱',
                    data:'7,866',
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .sourcePage{
        flex:1.5;
        padding-left:2rem;
        box-sizing:border-box;
        .main{
            padding-top: 0.3rem;
            width:100%;
            height:100%;
            li{
                float:left;
                width:50%;
                height:20%;
                img{
                    width:1.7rem;
                    height:1.5rem;
                    vertical-align: middle;
                }
                span{
                    margin-left:.6rem;
                    color:#ffffff;
                    &:nth-of-type(2){
                        color:#00FFFF;
                        font-size:1.4rem;
                    }
                }
            }
        }   
    }

img {
  vertical-align: -10px;
}

.centertitle{
  left: 16% !important;
  width: auto !important;
  transform: rotate(0deg) translate(-50%, 0) !important;
  color: #00E3FE !important;
  position: relative;
}
#rightCenter2 {
  position: absolute;
  //left: 30px;
  padding-left: 5rem;
  top: 260px;
  width: 450px;
  height: 280px;
  z-index: 5;
  display: block;
  opacity: 1;
  transform: rotate(0deg);
  background: rgba(255, 255, 255, 0);
  border: 0px solid #2ed64a;
  border-radius: 0px;
  padding: 0px;
}
#rightCenter1 {
  position: absolute;
  left: 32px;
  z-index: 5;
  opacity: 1;
  transform: rotate(0deg);
  background: rgba(255, 255, 255, 0);
  border: 0px solid #2ed64a;
  border-radius: 0px;
  padding: 0px;
  top: 260px;
  height: 320px;
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
}
#rightCenter1 div {
  width: 125px;
  height: 70px;
  //top: -20px;
  margin-left: 2px;
  background-color: #123864;
}
p {
  font-size: 16px;
  color: #fff;
}
#rightCenterTitle {
  position: absolute;
  margin-left: -150px;
  top: 200px;
}
.boderBottom {
  width: 300%;
  height: 4px;
  background: rgba(69, 148, 173, 1);
  background: linear-gradient(to right, rgba(69, 148, 173, 1), rgba(69, 148, 173, 0));
  margin-top: 10px;
}
</style>